<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ESM27 Search</title>
<link type="text/css" rel="stylesheet" href="/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/css/base.css">
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
	src="/js/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="search">
	<div class="header">
		<div class="search_from">
			<img alt="logo" src="/images/search_header_logo.png" class="logo"><input
				type="text" id="search_input" placeholder="" th:value="${key}" /><input
				type="button" id="search_button" value="搜一下">
		</div>
		<ul class="menu">
			<li><a src="">相关文档</a></li>
			<li><a src="">部署教程</a></li>
		</ul>
	</div>
	<nav class="navbar navbar-default my_nav">
		<ul class="nav navbar-nav">
        	<li class="active"><a href="#">气体<span class="sr-only">(current)</span></a></li>
        	<li><a href="#">消防</a></li>
        	<li><a href="#">建筑</a></li>
        	<li><a href="#">道路</a></li>
        </ul>
	</nav>
	<div class="list">
		<ul>
			<li th:each="chemical:${page.content}" class="search_chemical">
				<div>
					<a class="title" th:href="@{/chemical/{type}/{id}(id=${chemical.id},type=${chemical.tableName})}">[[${chemical.chemicalCnName + "|" +
						chemical.chemicalEnName}]]</a> <span class="sub_title">创建时间:[[${#dates.format(chemical.createTime,'yyyy-MM-dd')}]]</span>
				</div> <span class="contont">[[${chemical.content}]]</span>
			</li>
		</ul>
		<nav aria-label="Page navigation" class="page">
			<ul class="pagination">
				<li>
					<a th:if="${not page.first}" th:href="@{${'/chemical'}(page=0,size=${page.size},key=${key})}" aria-label="First"> <span
							aria-hidden="true">首页</span>
					</a>
					<a th:if="${page.first}" href="javascript:void(0);" aria-label="First"> <span
							aria-hidden="true">首页</span>
					</a>
				</li>
				<li>
					<a th:if="${not page.first}" th:href="@{${'/chemical'}(page=${page.number-1},size=${page.size},key=${key})}" aria-label="Previous"> <span
							aria-hidden="true">&lt;</span>
					</a>
					<a th:if="${page.first}" href="javascript:void(0);" aria-label="Previous"> <span
							aria-hidden="true">&lt;</span>
					</a>
				</li>
				<li th:if="${page.number+5 ge page.totalPages}" th:each="pageNo : ${#numbers.sequence(page.number, page.totalPages-1)}">
					<a th:if="${page.number eq pageNo}" href="javascript:void(0);" class="active" th:text="${pageNo + 1}"></a>
					<a th:if="${not (page.number eq pageNo)}" th:href="@{${'/chemical'}(page=${pageNo},size=${page.size},key=${key})}"  th:text="${pageNo + 1}"></a>
				</li>
				<li th:if="${page.number+5 lt page.totalPages}" th:each="pageNo : ${#numbers.sequence(page.number, page.number+5)}">
					<a th:if="${page.number eq pageNo}" href="javascript:void(0);" class="active" th:text="${pageNo + 1}"></a>
					<a th:if="${not (page.number eq pageNo)}" th:href="@{${'/chemical'}(page=${pageNo},size=${page.size},key=${key})}"  th:text="${pageNo + 1}"></a>
				</li>
				<li>
					<a th:if="${not page.last}" th:href="@{${'/chemical'}(page=${page.number+1},size=${page.size},key=${key})}" aria-label="Next"> <span aria-hidden="true">&gt;</span>
					</a>
					<a th:if="${page.last}" href="javascript:void(0);" aria-label="Next"> <span aria-hidden="true">&gt;</span>
					</a>
				</li>
				<li>
					<a th:if="${not page.last}" th:href="@{${'/chemical'}(page=${page.totalPages-1},size=${page.size},key=${key})}" aria-label="Last"> <span aria-hidden="true">末页</span>
					</a>
					<a th:if="${page.last}" href="javascript:void(0);" aria-label="Last"> <span aria-hidden="true">末页</span>
					</a>
				</li>
			</ul>
		</nav>
	</div>
	<div class="tools">
		<div>
			<span class="label label-info">service</span><a href="">ESM27应急处理系统DEMO</a>
		</div>
		<div>
			<span class="label label-info">service</span><a href="">ESM27应急处理后台编辑系统DEMO</a>
		</div>
		<div>
			<span class="label label-success">db-tool</span><a href="">NRCC网站爬虫抓取工具</a>
		</div>
	</div>
	<div class="clear:"></div>
	<script>
		$(document).ready(function() {
			$("#search_input").focus();
			$("#search_input").keyup(function(event) {
				if (event.keyCode == 13) {
					search($(this).val());
				}
			});
			$("#search_button").click(function() {
				search($("#search_input").val());
			});
			/* $.get('/chemical',function(datas){
				console.log(JSON.stringify(datas));
			}) */
		});

		function search(key) {
			window.location.href = "/chemical?key=" + key;
		}
	</script>
</body>
</html>